<template>
  <div class="container">
    <div class="customer_pic layout flex">
      <span class="flex-item">客户头像</span>
      <span class="flex">
        <img
          :src="guest_info.headurl !== '0' ? guest_info.headurl : '/static/imgs/system_user.png'"
        >
        <i class="grey_arrow"></i>
      </span>
    </div>
    <div class="wrap_box layout">
      <div class="title flex">
        <i class="shu"></i>
        <span class="flex-item">基本档案</span>
      </div>
      <div class="body">
        <div>
          <span>姓名</span>
          <span>{{guest_info.name}}</span>
        </div>
        <div>
          <span>注册账号</span>
          <span>{{guest_info.username}}</span>
        </div>
        <div>
          <span>会员卡号</span>
          <span>{{guest_info.vipcard}}</span>
        </div>
        <div>
          <span>性别</span>
          <span>{{guest_info.sex}}</span>
        </div>
        <div>
          <span>昵称</span>
          <input
            type="text"
            @blur="update_text"
            data-type="nickname"
            :data-oldval="guest_info.nickname"
            :value="guest_info.nickname"
            placeholder="未设置"
          >
        </div>
        <div>
          <span>生日</span>
          <span class="flex">
            <picker mode="date" @change="setbirthday" :value="birthday" :end="today">
              <view class="picker">
                <text v-if="guest_archives.birthyear == 0">未设置</text>
                <text v-else>{{birthday}}</text>
              </view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>年龄</span>
          <span v-if="guest_archives.birthyear == 0">未设置</span>
          <span v-else>{{age}}</span>
        </div>
        <div>
          <span>手机</span>
          <input
            type="text"
            @blur="update_text"
            data-type="phone"
            :data-oldval="guest_info.phone"
            :value="guest_info.phone"
            placeholder="未设置"
          >
        </div>
        <div>
          <span>身份证</span>
          <input
            type="text"
            @blur="update_text"
            data-type="code"
            data-towhere="update"
            :data-oldval="guest_archives.code"
            :value="guest_archives.code"
            placeholder="未设置"
          >
        </div>
        <div>
          <span>所在区域</span>
          <span class="flex">
            <picker mode="region" @change="setarea" :value="region">
              <view class="picker">
                <text v-if="region[0] !== ''">{{region[0]}}{{region[1]}}{{region[2]}}</text>
                <text v-else>未设置</text>
              </view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>家庭住址</span>
          <input
            type="text"
            @blur="update_text"
            data-type="address"
            data-towhere="update"
            :data-oldval="address"
            :value="address"
            placeholder="未设置"
          >
        </div>
      </div>
    </div>
    <div class="wrap_box layout" style="margin-bottom: 18rpx;">
      <div class="title flex">
        <i class="shu"></i>
        <span class="flex-item">附加档案</span>
      </div>
      <div class="body">
        <div>
          <span>身高</span>
          <input
            type="text"
            @blur="update_text"
            data-type="height"
            data-towhere="update"
            :data-oldval="guest_archives.height+' cm'"
            :value="guest_archives.height+' cm'"
            placeholder="未设置"
          >
        </div>
        <div>
          <span>体重</span>
          <input
            type="text"
            @blur="update_text"
            data-type="weight"
            data-towhere="update"
            :data-oldval="guest_archives.weight+' kg'"
            :value="guest_archives.weight+' kg'"
            placeholder="未设置"
          >
        </div>
        <div>
          <span>文化程度</span>
          <span class="flex">
            <picker
              @change="setcommon"
              :value="diplomaindex"
              :range="diploma"
              data-type="educational"
            >
              <view class="picker">{{diploma[diplomaindex]}}</view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>从事职业</span>
          <span class="flex">
            <picker
              @change="setcommon"
              :value="professionindex"
              :range="profession"
              data-type="job"
            >
              <view class="picker">{{profession[professionindex]}}</view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>婚姻状况</span>
          <span class="flex">
            <picker @change="setcommon" :value="marryindex" :range="marry" data-type="marry">
              <view class="picker">{{marry[marryindex]}}</view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>是否生育</span>
          <span class="flex">
            <picker @change="setcommon" :value="shengyuindex" :range="shengyu" data-type="shengyu">
              <view class="picker">{{shengyu[shengyuindex]}}</view>
            </picker>
            <i class="grey_arrow"></i>
          </span>
        </div>
        <div>
          <span>家庭月收入</span>
          <input
            type="text"
            @blur="update_text"
            data-type="income"
            data-towhere="update"
            :data-oldval="guest_archives.income+' 万'"
            :value="guest_archives.income+' 万'"
            placeholder="未设置"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'wx'
// import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      guest_id: '',
      guest_info: {},
      guest_archives: {},
      birthday: '',
      region: [],
      address: '',
      diploma: ['未设置', '小学', '初中', '高中', '大专', '本科', '硕士', '博士'],
      diplomaindex: 0,
      profession: ['未设置', '计算机/互联网/通信', '生产/工艺/制造', '医疗/护理/制药', '金融/银行/投资/保险', '商业/服务业/个体经营', '文化/广告/传媒', '娱乐/艺术/表演', '律师/法务', '教育/培训', '公务员/行政/事业单位', '模特', '空姐', '学生', '自由职业', '家庭主妇', '其他'],
      professionindex: 0,
      marry: ['未设置', '未婚', '离异', '已婚1-2年', '已婚2-5年', '已婚5-7年', '已婚7-10年', '已婚10年以上'],
      marryindex: 0,
      shengyu: ['未设置', '未生育', '已生育'],
      shengyuindex: 0,
      age: 0,
      permission: false,
      today: ''
    }
  },
  components: {
  },
  async onLoad () {
    const that = this
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 获取修改客户档案权限
    that.permission = wx.getStorageSync('userInfo').authority.guest_up_archives
    // 请求数据
    await Promise.all([
      that.gettoday(),
      that.get_info(),
      that.get_archives()
    ])
  },
  methods: {
    async gettoday () {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const time = year + '-' + month + '-' + day
      this.today = time
    },
    async get_info () {
      const that = this
      const res = await api.getguestinfocomme({
        guest_id: that.guest_id
      })
      if (res.code === '100') {
        let data = res.data[0]
        data['sex'] = data['sex'] === 0 ? '女' : '男'
        that.guest_info = data
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    async get_archives () {
      const that = this
      const res = await api.getguestbasearchives({
        guest_id: that.guest_id
      })
      if (res.code === '100') {
        let data = res.data
        that.birthday = data['birthyear'] + '-' + data['birthmonth'] + '-' + data['birthday']
        that.region[0] = data.province
        that.region[1] = data.city
        that.region[2] = data.area
        that.address = data.address
        that.diplomaindex = data.educational
        that.professionindex = data.job
        that.marryindex = data.marry
        that.shengyuindex = data.shengyu
        that.age = new Date().getFullYear() - data['birthyear']
        that.guest_archives = data
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    update_text (e) {
      const oldval = e.currentTarget.dataset.oldval
      const value = e.mp.detail.value
      if (oldval !== value) {
        let info = {}
        const type = e.currentTarget.dataset.type
        info[type] = value
        if (e.currentTarget.dataset.towhere === 'update') {
          this.update(info)
        } else {
          this.update_baseinfo(info)
        }
      }
    },
    async update_baseinfo (obj) {
      const that = this
      if (!that.permission) {
        Toast('您没有权限修改档案!', 'noicon')
        return false
      }
      const res = await api.updateguestbaseinfo({
        guest_id: that.guest_id,
        info: JSON.stringify(obj)
      })
      if (res.code === '100') {
        that.get_info()
        Toast(res.msg, 'noicon')
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    setbirthday (e) {
      const value = e.mp.detail.value
      const date = value.split('-')
      const info = {
        'birthyear': date[0],
        'birthmonth': date[1],
        'birthday': date[2]
      }
      this.update(info)
    },
    setarea (e) {
      const region = e.mp.detail.value
      if (region[0] === region[1]) {
        region[1] = ''
      }
      const info = {
        'province': region[0],
        'city': region[1],
        'area': region[2]
      }
      this.update(info)
    },
    setcommon (e) {
      let info = {}
      const type = e.currentTarget.dataset.type
      info[type] = e.mp.detail.value
      this.update(info)
    },
    async update (obj) {
      const that = this
      if (!that.permission) {
        Toast('您没有权限修改档案!', 'noicon')
        return false
      }
      const res = await api.updateguestarchives({
        guest_id: that.guest_id,
        info: JSON.stringify(obj)
      })
      if (res.code === '100') {
        that.get_archives()
        Toast(res.msg, 'noicon')
      } else {
        Toast(res.msg, 'noicon')
      }
    }
  }
}
</script>

<style scoped>
.layout {
  width: 100%;
  padding-left: 32rpx;
  background-color: #fff;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
.customer_pic {
  height: 152rpx;
  padding-right: 30rpx;
}
.customer_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}

.wrap_box {
  margin-top: 18rpx;
}
.wrap_box .title {
  height: 72rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.wrap_box .body > div {
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.wrap_box .body > div:last-child {
  border-bottom: none;
}
.wrap_box .body > div span:last-child {
  padding-right: 30rpx;
}
.wrap_box .body > div input {
  width: 300rpx;
  padding-right: 30rpx;
  text-align: right;
}
.grey_arrow {
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  margin-left: 34rpx;
}
.shu {
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
</style>